<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery全屏圆形导航轮播图布局特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
</head>
<body>
	<!-- coidea:loader START -->
    <div class="loader">
      <div class="lds-ripple">
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- coidea:loader END -->

    <!-- coidea:header START -->
    <header>
      <div class="header-inner">
        <div class="logo">
          <a href="http://www.htmleaf.com/"><span></span>CITIES</a>
        </div>
        <nav class="header-navigation">
          <li><a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201904175612.html"><span>Article</span></a></li>
          <li><a href="https://github.com/COIDEAwebsite/slideshow-with-animated-circular-navigation"  target="_blank"><span>Github</span></a></li>
          <li><a href="http://www.htmleaf.com/"><span>jQuery</span></a></li>
        </nav>
      </div>
    </header>
    <!-- coidea:header END -->

    <!-- slideshow START -->
    <section class="slideshow">

      <!-- slideshow:navigation START -->
      <ul class="navigation">

        <!-- slideshow:navigation:item START -->
        <li class="navigation-item active">
          <span class="rotate-holder"></span>
          <span class="background-holder" style="background-image: url(assets/img/img-1.jpeg);"></span>
        </li>
        <!-- slideshow:navigation:item END -->

        <!-- slideshow:navigation:item START -->
        <li class="navigation-item">
          <span class="rotate-holder"></span>
          <span class="background-holder" style="background-image: url(assets/img/img-2.jpeg);"></span>
        </li>
        <!-- slideshow:navigation:item END -->

        <!-- slideshow:navigation:item START -->
        <li class="navigation-item">
          <span class="rotate-holder"></span>
          <span class="background-holder" style="background-image: url(assets/img/img-3.jpeg);"></span>
        </li>
        <!-- slideshow:navigation:item END -->

        <!-- slideshow:navigation:item START -->
        <li class="navigation-item">
          <span class="rotate-holder"></span>
          <span class="background-holder" style="background-image: url(assets/img/img-4.jpeg);"></span>
        </li>
        <!-- slideshow:navigation:item END -->

        <!-- slideshow:navigation:item START -->
        <li class="navigation-item">
          <span class="rotate-holder"></span>
          <span class="background-holder" style="background-image: url(assets/img/img-5.jpeg);"></span>
        </li>
        <!-- slideshow:navigation:item END -->

        <!-- slideshow:navigation:item START -->
        <li class="navigation-item">
          <span class="rotate-holder"></span>
          <span class="background-holder" style="background-image: url(assets/img/img-6.jpeg);"></span>
        </li>
        <!-- slideshow:navigation:item END -->

        <!-- slideshow:navigation:item START -->
        <li class="navigation-item">
          <span class="rotate-holder"></span>
          <span class="background-holder" style="background-image: url(assets/img/img-7.jpeg);"></span>
        </li>
        <!-- slideshow:navigation:item END -->

        <!-- slideshow:navigation:item START -->
        <li class="navigation-item">
          <span class="rotate-holder"></span>
          <span class="background-holder" style="background-image: url(assets/img/img-8.jpeg);"></span>
        </li>
        <!-- slideshow:navigation:item END -->

        <!-- slideshow:navigation:item START -->
        <li class="navigation-item">
          <span class="rotate-holder"></span>
          <span class="background-holder" style="background-image: url(assets/img/img-9.jpeg);"></span>
        </li>
        <!-- slideshow:navigation:item END -->

      </ul>
      <!-- slideshow:navigation END -->


      <!-- slideshow:details START -->
      <div class="detail">
      
        <!-- slideshow:details START -->
        <div class="detail-item active">
          <div class="headline">Amsterdam</div>
          <div class="background" style="background-image: url(assets/img/img-1.jpeg)"></div>
        </div>
        <!-- slideshow:details END -->
        
        <!-- slideshow:details START -->
        <div class="detail-item">
          <div class="headline">Rome</div>
          <div class="background" style="background-image: url(assets/img/img-2.jpeg);"></div>
        </div>
        <!-- slideshow:details END -->
        
        <!-- slideshow:details START -->
        <div class="detail-item">
          <div class="headline">Paris</div>
          <div class="background" style="background-image: url(assets/img/img-3.jpeg);"></div>
        </div>
        <!-- slideshow:details END -->
        
        <!-- slideshow:details START -->
        <div class="detail-item">
          <div class="headline">Prague</div>
          <div class="background" style="background-image: url(assets/img/img-4.jpeg);"></div>
        </div>
        <!-- slideshow:details END -->
        
        <!-- slideshow:details START -->
        <div class="detail-item">
          <div class="headline">Moscow</div>
          <div class="background" style="background-image: url(assets/img/img-5.jpeg);"></div>
        </div>
        <!-- slideshow:details END -->
        
        <!-- slideshow:details START -->
        <div class="detail-item">
          <div class="headline">Kyoto</div>
          <div class="background" style="background-image: url(assets/img/img-6.jpeg);"></div> 
        </div>
        <!-- slideshow:details END -->
        
        <!-- slideshow:details START -->
        <div class="detail-item">
          <div class="headline">Sydney</div>
          <div class="background" style="background-image: url(assets/img/img-7.jpeg);"></div>
        </div>
        <!-- slideshow:details END -->
        
        <!-- slideshow:details START -->
        <div class="detail-item">
          <div class="headline">Istanbul</div>
          <div class="background" style="background-image: url(assets/img/img-8.jpeg);"></div>
        </div>
        <!-- slideshow:details END -->
        
        <!-- slideshow:details START -->
        <div class="detail-item">
          <div class="headline">Hong Kong</div>
          <div class="background" style="background-image: url(assets/img/img-9.jpeg);"></div>
        </div>
        <!-- slideshow:details END -->
        
      </div>
      <!-- slideshow:details END -->

    </section>
    <!-- slideshow END -->
    <script src="assets/js/jquery-1.11.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/TextPlugin.min.js"></script>
    <script src="assets/js/demo.js"></script>
</body>
</html>